<template>
    <div>
        <fieldset>
            <legend>readOnly</legend>
            {{ state1 }}
            <van-button @click="changeName1">修改name</van-button>
            <van-button @click="changeColor1">修改color</van-button>
        </fieldset>
        <fieldset>
            <legend>shallowReadOnly</legend>
            {{ state2 }}
            <van-button @click="changeName2">修改name</van-button>
            <van-button @click="changeColor2">修改color</van-button>
        </fieldset>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, readonly, shallowReadonly } from "vue";

export default defineComponent({
    setup() {
        //深浅都只读
        const state1 = readonly(reactive({ name: "zs", car: { color: "red" } }));
        const changeName1 = ()=>{
            // state1.name += "=="//报错
        }
        const changeColor1 = ()=>{
            // state1.car.color += "=="//报错
        }
        //浅度只读，深度可修改
        const state2 = shallowReadonly(reactive({ name: "zs", car: { color: "red" } }));
        const changeName2 = ()=>{
            // state2.name += "=="//报错
        }
        const changeColor2 = ()=>{
            state2.car.color += "=="
        }
        return { state1,changeName1,changeColor1,state2,changeName2,changeColor2 };
    },
});
</script>

<style scoped></style>
